<template>
  <div>
    <el-dialog title="添加角色" :visible.sync="obj.isshow">
  <el-form :model="form">
    <el-form-item label="角色名称" :label-width="formLabelWidth">
      <el-input v-model="form.rolename" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="角色权限" :label-width="formLabelWidth">
      <!-- Element UI:树形控件
      default-expand-all：是否展开所有节点 
      default-checked-keys：默认选中哪些节点
      default-expanded-keys:默认要展开的节点
      -->
      <el-tree
      :default-expand-all=true
        ref="tree"
        :data="data"
        show-checkbox
        node-key="id"
        :default-checked-keys="[5]"
        :props="defaultProps">
      </el-tree>      
    </el-form-item>
    <el-form-item label="状态" :label-width="formLabelWidth">
       <el-switch
        :active-value=1
        :inactive-value=2
        v-model="form.status"
        active-color="#13ce66"
        inactive-color="#ff4949">
        </el-switch>
    </el-form-item>    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <!--
    <el-button @click="getCheckedNodes">通过 node 获取</el-button>
     <el-button @click="getCheckedKeys">通过 key 获取</el-button>
     <el-button @click="setCheckedNodes">通过 node 设置</el-button>
     <el-button @click="setCheckedKeys">通过 key 设置</el-button>
     -->
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addroles">添加</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>

import {getMenuList,addOneRole  } from "../../../request/api.js";
import { successMsg,faileMsg } from "../../../tools/tools.js";

export default {
    props:['obj'],
    mounted(){
      this.getAllMenuData();
    },
    methods:{
      //重置表单数据：
      resetForm(){
        this.obj.isshow = false;//关闭对话框
        this.form = {
            menus:[],//角色权限
            rolename:'',//角色名称
            status:1 //状态 1正常2禁用          
        };

        //通过key来重置树形控件中选中的权限：
         this.$refs.tree.setCheckedKeys([]);
      },
      //添加菜单：
      addroles(){
          //用户选中的角色权限(菜单id):
          this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
          //添加用户角色：
       addOneRole(this.form).then(d=>{
            if(d.data.code == 200){
               successMsg('角色添加成功');
               this.resetForm();
            }else{
              successMsg('角色添加失败');
            }
          }).catch(e=>{
              successMsg('角色添加异常');
          }) 
      },
      //查询所有菜单(包含子菜单)数据
      getAllMenuData(){
         getMenuList().then(d=>{
            console.log(d,'1111');
            if(d.data.code == 200){
              this.data = d.data.list;
            }
         })
      }
      /*
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
    setCheckedNodes() {
            this.$refs.tree.setCheckedNodes([{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 9,
              label: '三级 1-1-1'
            }]);
          }, 
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3,6]);
      }*/

    },
  data(){
    return {
        formLabelWidth: '120px',
        form:{
            rolename:'',//角色名称
            status:1 //状态 1正常2禁用
        },
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'title'
        }
    }
  }
}
</script>

<style>

</style>